<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>首页</title>

    <!-- Bootstrap -->
	<!-- 新 Bootstrap 核心 CSS 文件 -->
	<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">

	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>

	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    

    <div class="container">
    	<div class="row"  style="margin-top:70px">
    		<div class="col-xs-8 col-sm-8 col-md-8">
          <input id="sim" type="text" class="form-control" id="exampleInputName2" placeholder="输入你的SIM卡号">
		    </div>
        <div class="col-xs-2 col-sm-2 col-md-2">
          <div class="btn-group">
            <input type="hidden" id="type" class="form-control" value="15天">
            <button id="typeBtn" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              15天 
              <!-- <span class="caret"></span> -->
            </button>
            <!-- <ul class="dropdown-menu">
              <li><a class="type-li" href="#">15天</a></li>
              <li><a class="type-li" href="#">10天</a></li>
            </ul> -->
          </div>
        </div>
		  </div>
      
      <div class="row"  style="margin-top:20px">
        <div class="col-xs-8 col-sm-8 col-md-8">
          <input id="open_time" type="date" class="form-control" placeholder="开通时间">
        </div>
      </div>

      <div class="row"  style="margin-top:20px">
        <div class="col-xs-8 col-sm-8 col-md-8">
          <input id="phone" type="text" class="form-control" id="exampleInputName2" placeholder="输入你的手机号">
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2">
          <button id="codeBtn" type="submit" class="btn btn-primary">获取验证码</button>
        </div>
      </div>

      <div class="row"  style="margin-top:20px">
        <div class="col-xs-8 col-sm-8 col-md-8">
          <input id="code" type="text" class="form-control" id="exampleInputName2" placeholder="验证码">
        </div>
      </div>

      <div class="row"  style="margin-top:20px">
        <div class="col-xs-12 col-sm-12 col-md-12">
                <button id="open" type="submit" class="btn btn-primary btn-block">开通</button>
        </div>
      </div>


  </div>


  <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">提示</h4>
      </div>
      <div class="modal-body">
        <p id="tip">开通成功</p>
      </div>
      <div class="modal-footer">
        <button id="close" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button id="sure" type="button" class="btn btn-primary">确定</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div>
    
    <script type="text/javascript">
        $(document).ready(function(){
          var name = "sim";
          var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
          var r = window.location.search.substr(1).match(reg);  //匹配目标参数
          if (r == null) return null; //返回参数值
          $("#sim").val(unescape(r[2]));
          $("#sim").attr("disabled","true");


          name = "type";
          reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
          r = window.location.search.substr(1).match(reg);  //匹配目标参数
          if (r == null) return null; //返回参数值
          $("#typeBtn").html(decodeURI(r[2])+"天");

          // $(".type-li").click(function(){
          //     $("#typeBtn").html($(this).html()+ " <span class=\"caret\"></span>");
          //     $("#type").val($(this).html());
          // });
          
          $("#sure").click(function(){
              window.location.href="index.html";
          });

          $("#codeBtn").click(function(){
            var phone = $("#phone").val();
            $.ajax({  
                type : "POST",  //提交方式  
                url : "/sms/app/code.php",//路径  
                data : { 
                    "phone" : phone 
                },//数据，这里使用的是Json格式进行传输  
                success : function(result) {//返回数据根据结果进行相应的处理  
                  if (result.code < 1) {
                    $("#sure").removeClass("hidden");
                     $("#close").removeClass("hidden");
                      $("#tip").html(result.data);
                      $("#sure").addClass("hidden");
                      $('#myModal').modal("toggle");
                  } else {
                    time($("#codeBtn"));
                  }
                }  
            });
          });

          $("#open").click(function(){

            

            var simCode = $("#sim").val();
            var type = $("#type").val();
            var phone = $("#phone").val();
            var code = $("#code").val();
            var open_time = $("#open_time").val();
            $.ajax({  
                type : "POST",  //提交方式  
                url : "/sms/app/input.php",//路径  
                data : {  
                    "sim" : simCode , 
                    "type" : type  ,
                    "phone" : phone , 
                    "code" : code  ,
                    "open_time":open_time,
                },//数据，这里使用的是Json格式进行传输  
                success : function(result) {//返回数据根据结果进行相应的处理  
                     
                     $("#sure").removeClass("hidden");
                     $("#close").removeClass("hidden");
                     if (result.code > 0) {
                        $("#tip").html(result.data);
                        $("#close").addClass("hidden");
                        $('#myModal').modal("toggle")
                     } else {
                        $("#tip").html(result.data);
                        $("#sure").addClass("hidden");
                        $('#myModal').modal("toggle")
                     }

                    // window.location.href="input.html?sim="+$("#sim").val();
                }  
            });
          });


          var wait=60;
          function time(o) {
              if (wait == 0) {
                  o.attr("disabled",false);           
                  o.html("获取验证码");
                  wait = 60;
              } else { // www.jbxue.com
                  o.attr("disabled", true);
                  o.html(wait + "秒后可重发");
                  wait--;
                  setTimeout(function() {
                      time(o)
                  },
                  1000)
              }
          }
        });
    </script>
  </body>
</html>